<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="160px">
                <el-row class="menu-bar">
                    <el-col :span="50">
                        <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen"
                            @close="handleClose">
                            <el-sub-menu index="1">
                                <template #title>
                                    <el-icon>
                                        <Menu />
                                    </el-icon>
                                    <span>员工管理</span>
                                </template>
                                <el-menu-item index="1-1" @click="toEmpMessage">员工信息</el-menu-item>
                                <el-menu-item index="1-2" @click="toEmpAttendance">员工考勤</el-menu-item>
                                <el-menu-item index="1-3" @click="toEmpLeave">员工请假</el-menu-item>
                                <el-menu-item index="1-4" @click="toEmpResign">员工离职</el-menu-item>
                            </el-sub-menu>
                            <el-sub-menu index="2">
                                <template #title>
                                    <el-icon>
                                        <Menu />
                                    </el-icon>
                                    <span>活动管理</span>
                                </template>
                                <el-menu-item index="2-1" @click="toTraining">培训活动</el-menu-item>
                                <el-menu-item index="2-2" @click="toTeamBuilding">团建活动</el-menu-item>
                            </el-sub-menu>
                            <el-sub-menu index="3">
                                <template #title>
                                    <el-icon>
                                        <Menu />
                                    </el-icon>
                                    <span>日志管理</span>
                                </template>
                                <el-menu-item index="3-1" @click="toEmpLogManager">员工操作日志</el-menu-item>
                                <el-menu-item index="3-2" @click="toAdminLogManager">管理员操作日志</el-menu-item>
                            </el-sub-menu>
                        </el-menu>
                    </el-col>
                </el-row>
            </el-aside>
            <el-main>
                <RouterView></RouterView>
            </el-main>
        </el-container>
    </div>
</template>
<script setup>
import { RouterView } from 'vue-router'
import { useRouter } from 'vue-router';
import { Menu } from '@element-plus/icons-vue'
import { useAdminRightsStore } from '@/store/index';
const rightsStore = useAdminRightsStore()
//获取权限
const rights = rightsStore.$state.rights
const router = useRouter();
function toEmpMessage() {
    router.push('/menu/empMessage')
}
function toEmpAttendance() {
    router.push('/menu/empAttendance')
}
function toEmpLeave() {
    router.push('/menu/empLeave')
}
function toEmpResign() {
    router.push('/menu/empResign')
}
function toTraining() {
    router.push('/menu/training')
}
function toTeamBuilding() {
    router.push('/menu/teamBuilding')
}
function toAdminLogManager() {
    //对应日志权限的控制
    if (rights === 0) {
        //无权限
        router.push('/menu/noRights')
    } else if (rights === 1) {
        //有权限
        router.push('/menu/adminLogManager')
    }
}
function toEmpLogManager() {
    router.push('/menu/empLogManager')
}
</script>

<style>
.menu-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: aliceblue;
}
</style>